<template>
<div>
  <el-card class="search-card">
    <BasicForm
      ref="formData"
      :formColumns="formItemList"
      :dataSource="formData"
      :defaultExpandStatus="false"
      :handleSearchForm="handleQueryForm"
      :colNumOfRow="4"
      @getFormData="getFormData"
    ></BasicForm>
  </el-card>
  <el-card class="table-card">
    <basic-table
      showIndexCol
      showActionCol
      :showSelectCol="false"
      :loading="tableInfo.loading"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :pagination="pagination"
      :tableHeight="460"
      :actionColWidth="150"
      :actionRender="renderTableBtnAction"
      @pageChange="handlePageChange"
      @pageSizeChange="handlePageSizeChange"
    >
      <el-row type="flex" slot="content_context">
        <el-button
          v-if="showBtn('导出') && supplierExportConfig.supplier"
          type="primary"
          @click="handleExport"
        >导出</el-button>
        <el-button
          v-if="showBtn('开通账号')"
          @click="handleOpenAccount"
        >开通账号</el-button>
      </el-row>
    </basic-table>
  </el-card>
  <!-- 关闭原因 -->
  <TipDialog
    :visible.sync="tipVisible"
    :params="closeData"
    @getTableData="getTableData"
  />
  <!-- 关闭日志 -->
  <LogDialog
    :visible.sync="logVisible"
    :viewId="viewId"
  />
  <!-- 导出 -->
  <ExportDialog
    :visible.sync="exportVisible"
    :exportInfo='exportInfo'
    :total='pagination.total'
  />
</div>
</template>
<script>
import BasicPage from '@/mixins/supplier/basicPage';
import Dict from '@/mixins/supplier/dict';
import BasicForm from '@/components/supplier/BasicForm';
import BasicTable from '@/components/supplier/BasicTable';
import { FORM_ITEM_LIST, FORM_DATA, TABLE_COLUMNS } from './constants';
import { getTableAction } from '@/pages/supplier/utils/btnsUtils';
import { getHasIndexTableData } from '@/pages/supplier/utils/bizUtils';
import { setAuthBtnId } from '@/utils/bizUtils';
import { getSupplierAccountParams } from './utils';
import {
  querySupplierAccountListService,
  exportSupplierAccountFileService,
  openSupplierAccountService
} from '@/api/supplier/management/supplierAccount';
import LogDialog from './components/LogDialog';
import TipDialog from './components/TipDialog';
import ExportDialog from '@supplier/components/ExportDialog';

export default {
  mixins: [BasicPage, Dict],
  components: {
    BasicForm,
    BasicTable,
    LogDialog,
    TipDialog,
    ExportDialog
  },
  data () {
    return {
      formItemList: FORM_ITEM_LIST,
      formData: FORM_DATA,
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false
      },
      logVisible: false,
      tipVisible: false,
      exportVisible: false,
      closeData: {},
      viewId: '',
      exportInfo: {}
    }
  },
  computed: {
    // 表单入参
    formParams () {
      const { createTime } = this.formData;
      const [startTime = '', endTime = ''] = createTime || [];
      return _.omit({
        ...this.formData,
        startTime,
        endTime
      }, 'createTime')
    }
  },
  mounted () {
    this.handleQueryForm();
  },
  methods: {
    renderTableBtnAction (h, { row }) {
      const actionList = [
        { label: '操作日志', method: this.handleViewCloseLog, hasAuth: true },
      ];
      if (row.status == 1) {
        actionList.push({
          label: '关闭账号', method: this.handleCloseAccount, hasAuth: true
        })
      }
      if (row.status == 2) {
        actionList.push({
          label: '开启账号', authLabel: '开通账号', method: this.openAccount, hasAuth: true
        })
      }
      return getTableAction({ h, row, actionList, showBtn: this.showBtn });
    },
    async openAccount (row) {
      setAuthBtnId('开通账号');
      const params = getSupplierAccountParams(row);
      const res = await openSupplierAccountService(params, state => { this.tableInfo.loading = state })
      if (res) {
        this.$message.success('操作成功')
        this.handleQueryForm()
      }
    },
    // 导出
    async handleExport () {
      setAuthBtnId('导出');
      this.exportVisible = true;
      this.exportInfo = {
        service: exportSupplierAccountFileService,
        excelTitle: '供应商账号信息',
        params: this.formParams,
      }
    },
    // 开通账号
    handleOpenAccount () {
      setAuthBtnId('开通账号');
      this.$router.push({ name: 'openAccount' });
    },
    // 关闭账号
    handleCloseAccount (row) {
      setAuthBtnId('关闭账号');
      const params = getSupplierAccountParams(row);
      this.tipVisible = true;
      this.closeData = params;
    },
    // 查看关闭日志
    handleViewCloseLog (row) {
      this.viewId = row.supplierId;
      this.logVisible = true;
    },
    // 获取表单数据
    getFormData (formData) {
      this.formData = formData;
    },
    // 获取表单查询入参
    getParamsBySearchForm () {
      const { current, size } = this.pagination;
      return { ...this.formParams, current, size };
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId('查询');
      const res = await querySupplierAccountListService(
        this.getParamsBySearchForm(),
        state => { this.tableInfo.loading = state }
      );
      if (res) {
        const { records, total } = res.result;
        this.tableInfo.list = getHasIndexTableData(records, this.pagination);
        this.pagination.total = total;
      }
    },
  }
}
</script>
